<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item :class="!item.itemDtos || item.itemDtos.length == 0 ? 'no-arrow' : ''" v-for="(item, index) in list" :key="index" :name="`${item.level}${index}1`">
        <template slot="title">
          <div class="flex align-center title-box margin-top-5">
            <div class="item-box s-box" :class="`item-lecel-box${item.level}`" :style="[{ paddingLeft: item.level * 25 + 'px' }]">
              <span>{{ item.chargeItemName }}</span>
              <span v-tooltip="item.chargeItemName" class="icon el-icon-question padding-left-5"></span>
            </div>
            <div class="item-box l-box flex" :class="`item-lecel-box${item.level}`" v-for="(num, numIndex) in item.inflowPriceList" :key="`charge${item.level}${numIndex}`">
              <div class="explain-title">{{ num | moneyFilterNoUnit }}</div>
              <div class="explain-title">{{ item.planPriceList[numIndex] | moneyFilterNoUnit }}</div>
              <div class="explain-title">
                <span v-if="item.bizType == 1 || item.bizType == 3" :class="item.plantDeviationPriceList[numIndex] > 0 ? 'color-12AA9C' : 'color-red'">{{ item.plantDeviationPriceList[numIndex] >= 0 ? '+' : '-' }}{{ Math.abs(num - item.planPriceList[numIndex]) | moneyFilterNoUnit }}</span>
                <span v-if="item.bizType == 2 || item.bizType == 4" :class="item.plantDeviationPriceList[numIndex] < 0 ? 'color-12AA9C' : 'color-red'">{{ item.plantDeviationPriceList[numIndex] >= 0 ? '+' : '-' }}{{ Math.abs(num - item.planPriceList[numIndex]) | moneyFilterNoUnit }}</span>
              </div>
              <div v-if="num == 0 && item.planPriceList[numIndex] == 0" class="explain-title">--</div>
              <div v-else-if="item.planPriceList[numIndex] == 0 && num != 0" class="explain-title">
                <span>计划外</span>
              </div>
              <div v-else class="explain-title">
                <span v-if="item.bizType == 1 || item.bizType == 3" :class="item.plantDeviationPriceList[numIndex] > 0 ? 'color-12AA9C' : 'color-red'">{{ item.plantDeviationPriceList[numIndex] >= 0 ? '↑' : '↓' }}{{ mulHundred(item.plantDeviationPriceList[numIndex]) }}%</span>
                <span v-if="item.bizType == 2 || item.bizType == 4" :class="item.plantDeviationPriceList[numIndex] < 0 ? 'color-12AA9C' : 'color-red'">{{ item.plantDeviationPriceList[numIndex] >= 0 ? '↑' : '↓' }}{{ mulHundred(item.plantDeviationPriceList[numIndex]) }}%</span>
              </div>
            </div>
          </div>
        </template>
        <!-- <div class="flex align-center">
          <div class="item-box s-box" :style="[{ paddingLeft: item.level * 25 + 'px' }]">计划偏差</div>
          <div class="item-box l-box padding-left-10" v-for="(plant, plantIndex) in item.planPriceList" :key="`inflowPrice${item.level}${index}${plantIndex}`">
            <span>{{ plant | moneyFilterNoUnit }}</span>
            <span :class="item.plantDeviationPriceList[plantIndex] >= 0 ? 'color-12AA9C' : 'color-red'">{{ item.plantDeviationPriceList[plantIndex] >= 0 ? '↑' : '↓' }}{{ Math.abs(item.plantDeviationPriceList[plantIndex] * 100) }}%</span>
          </div>
        </div>
        <div class="flex align-center">
          <div class="item-box s-box" :style="[{ paddingLeft: item.level * 25 + 'px' }]">同比偏差</div>
          <div class="item-box l-box padding-left-10" v-for="(compare, compareIndex) in item.plantDeviationPriceList" :key="`inflowPrice${item.level}${index}${compareIndex}`">--</div>
        </div> -->
        <cash-tree :list="item.itemDtos"></cash-tree>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import { guid,accMul,toFixedTwo } from '@/common/js/utils';

  export default {
    name: 'cashTree',
    props: {
      list: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },

    data() {
      return {
        activeNames: ['101', '201', '211', '221', '231'],
      };
    },

    methods: {
      mulHundred(num){
        num = accMul(num,100)
        let res = toFixedTwo(num)
        return num
      },
      goDictionary(name){
        let url = "/businessAssets/dataDic/index?token=1BECA34141E04A338B570F70C780C955&menuId=caa9147d6ba64e1a95bd3eeb76cc5203&parentMenuId=7ee2400d0e72437aa3bdb5823497537f&timestamp=1667202507216&keyWord=" + name
        window.open(url)
      }
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-collapse-item__header {
    position: relative;
    border: none;
  }
  ::v-deep .el-collapse-item__arrow {
    position: absolute;
    left: 5px;
    top: 19px;
    color: #666;
  }
  ::v-deep .el-collapse-item__content {
    padding-bottom: 0;
  }
  ::v-deep .el-collapse-item__header {
    height: 100%;
  }
  ::v-deep .el-collapse-item__wrap {
    width: fit-content;
  }
  .no-arrow{
    ::v-deep .el-collapse-item__arrow{
      display: none!important;
    }
  }
  .item-box {
    height: 42px;
    border-radius: 3px 0px 0px 3px;
    padding: 10px;
    border-right: 2px solid #ffffff;
  }
  // .item-lecel-box1 {
  //   background: #3384fe;
  //   color: #fff;
  // }
  // .item-lecel-box2 {
  //   background: #8fbcff;
  //   color: #333;
  // }
  // .item-lecel-box3 {
  //   background: #c0d3ef;
  //   color: #333;
  // }
  .l-box {
    width: 600px;
  }
  .s-box {
    width: 200px;
  }
  .explain-title{
    width: 25%;
    text-align: left;
    padding-left: 55px;
  }
</style>
